<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>

	<%-- 静态包含 base标签、css样式、jQuery文件 --%>
	<%@ include file="/pages/common/head.jsp"%>
	
	<Script type="text/javascript">
		$(function () {
			// 购买按钮点击事件
			$("button.buy").click(function() {
				var userId = $(this).attr("userId");
				if (userId == "") {
					location.href = "http://localhost:8080/ShoppingCart/pages/user/login.jsp"
				} else {
					var productId = $(this).attr("productId");
					var productCounts = $(this).attr("productCounts")
					var quantity = prompt("购买数量:");					
					var pattern = /^[1-9]\d*$/;
					if (pattern.test(quantity) == false) {
						alert("请输入正整数！");
					} else {
						if (parseInt(productCounts) <  parseInt(quantity)) {
							alert("库存不足哦，减少购买数量试试吧！");
						} else {
							location.href = "http://localhost:8080/ShoppingCart/client/orderServlet?action=createOrder"
									+ "&productId=" + productId + "&quantity=" + quantity
						}
					}
				}
			});
			
			// 加入购物车按钮点击事件
			$("button.addToCart").click(function () {
				var userId = $(this).attr("userId");
				if (userId == "") {
					location.href = "http://localhost:8080/ShoppingCart/pages/user/login.jsp"
				} else {
					var productId = $(this).attr("productId");
					var productCounts = $(this).attr("productCounts")
					var quantity = prompt("购买数量:");					
					var pattern = /^[1-9]\d*$/;
					if (pattern.test(quantity) == false) {
						alert("请输入正整数！");
					} else {
						if (parseInt(productCounts) <  parseInt(quantity)) {
							alert("库存不足哦，减少购买数量试试吧！");
						} else {
							// 发ajax请求，添加商品到购物车
							$.getJSON("http://localhost:8080/ShoppingCart/cartServlet","action=addItem&productId="
									+ productId + "&quantity=" + quantity, function (data) {
								if (data.alreadyExists == true) {
									alert("该商品已经在购物车中了哦！看看其他商品吧！");
								} else {
									$("#cartProductsCount").text("您的购物车中有 " + data.productsCount + " 种商品");
									$("#cartLastName").text("您刚刚将 " + data.lastName + "加入到了购物车中");
								}
							})
						}
					}
				}
			});
		});
	</Script>

</head>
<body>
	
	<div id="header">
			<img class="logo_img" alt="" src="static/img/logo.jpg" >
			<span class="wel_word">购物车系统</span>
			<div>
				<%--如果用户还没有登录，显示【登录和注册的菜单】--%>
				<c:if test="${empty sessionScope.user}">
					<a href="pages/user/login.jsp">登录</a> |
					<a href="pages/user/register.jsp">注册</a> &nbsp;&nbsp;
				</c:if>
				<%--如果已经登录，则显示登录成功之后的用户信息--%>
				<c:if test="${not empty sessionScope.user}">
					<span>欢迎<span class="um_span">${sessionScope.user.name}</span>光临</span>
					<a href="client/orderServlet?action=showOrder">我的订单</a>
					<a href="userServlet?action=logout">退出登录</a>&nbsp;&nbsp;&nbsp;
				</c:if>

				<a href="cartServlet?action=showCart">购物车</a>
				
				<c:if test="${not empty sessionScope.admin}">
					<a href="pages/admin/admin.jsp">后台管理</a>
				</c:if>
			</div>
	</div>

	<div id="main">
		<div id="product">
			<div class="product_cond">
				<form action="client/productServlet" method="get">
					<input type="hidden" name="action" value="pageByPrice">
					价格：<input id="min" type="text" name="min" value="${param.min}"> 元 -
						<input id="max" type="text" name="max" value="${param.max}"> 元
						<input type="submit" value="查询" />
				</form>
			</div>
			<div style="text-align: center">
				<c:if test="${empty sessionScope.cart.items}">
					<%--购物车为空的输出--%>
					<span id="cartProductsCount"> </span>
					<div>
						<span style="color: red" id="cartLastName">当前购物车为空</span>
					</div>
				</c:if>
				<c:if test="${not empty sessionScope.cart.items}">
					<%--购物车非空的输出--%>
					<span id="cartProductsCount">您的购物车中有 ${sessionScope.cart.items.size()} 种商品</span>
					<div>
						<span style="color: red" id="cartLastName"></span>
					</div>
				</c:if>
			</div>
			
			<c:if test="${empty requestScope.page.items}">
				<%--商品列表为空的情况--%>
				<div style="text-align: center">
					<span>亲，没有找到符合条件的商品哦！换个条件试试吧！</span>
				</div>
			</c:if>
			<c:if test="${not empty requestScope.page.items}">
				<%--商品列表非空的情况--%>
				<c:forEach items="${requestScope.page.items}" var="product">
				<div class="p_list">
					<div class="img_div">
						<img class="product_img" alt="" src="${product.imgPath}" />
					</div>
					<div class="product_info">
						<div class="product_name">
							<span class="sp1">商品名:</span>
							<span class="sp2">${product.name}</span>
						</div>
						<div class="product_price">
							<span class="sp1">价格:</span>
							<span class="sp2">￥${product.price}</span>
						</div>
						<div class="product_count">
							<span class="sp1">库存:</span>
							<span class="sp2">${product.counts}</span>
						</div>
						<div class="product_sales">
							<span class="sp1">销量:</span>
							<span class="sp2">${product.sales}</span>
						</div>
						<div class="product_productor">
							<span class="sp1">商家:</span>
							<span class="sp2">${product.productor}</span>
						</div>
						<div class="product_crtTime">
							<span class="sp1">上架时间:</span>
							<span class="sp2">${product.crtTime}</span>
						</div>
						<div class="product_operate">
							<button userId="${sessionScope.user.id}" productId="${product.id}" productCounts="${product.counts}" class="addToCart">加入购物车</button>
							<button userId="${sessionScope.user.id}" productId="${product.id}" productCounts="${product.counts}" class="buy">购买</button>
						</div>
					</div>
				</div>
				</c:forEach>
			</c:if>
		</div>

		<%--静态包含分页条--%>
		<%@include file="/pages/common/page_nav.jsp"%>

	</div>

	<%--静态包含页脚内容--%>
	<%@include file="/pages/common/footer.jsp"%>

</body>
</html>